<template>
<!-- 

  组织架构组件
 -->
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <!-- 头部标签 el-card相当于一个div-->
      <el-card class="tree-card">
        <treeTools :treeNode='company' :is-root="true" @addDepts="addDepts"/>
        <!-- 树状文件显示 -->
        <el-tree :data="departs">
          <!-- @delDepts="getDepartments"重新调用方法刷新页面 -->
          <treeTools slot-scope="{ data }" :treeNode="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts"/>
        </el-tree>
      </el-card>
      <!--.sync是配合this.$emit("update:showDialog",false)可以关闭弹窗
-->
<!--ref="addDept"是因为要调用子组件里面的方法而使用获取组件的实例对象  -->
    <addDept ref="addDept" :showDialog.sync="showDialog" :treeNode="node" @addDepts="getDepartments"/>

    </div>
  </div>
</template>

<script>
// 引入服用的树状图组件
import treeTools from "./components/tree-tools";
// 接收树状图接口数据部件接口
import {getDepartments} from "@/api/departments"
// 引入调整树状图的方法
import {tranListToTreeData} from "@/utils"
// 引入添加部门的弹窗组件
import addDept from "./components/add-dept";

export default {
  // 注册组件
  components: {
    treeTools,
    addDept
  },
  data() {
    return {
      // 创建第一个标题的实例
      loading: false, // 用来控制进度弹层的显示和隐藏
      company: {},
      departs: [],
      // defaultProps: {
      //   label: "label", // 表示 从这个属性显示内容
      // },
      // 创建点击添加部门按钮是否显示弹窗
       showDialog: false ,// 显示窗体
      //  接收要添加子节点的文件
      node:null
    };
    //   defaultProps: {
    //     // 这个是点击的children文件
    //     children: 'children',
    //     // label点击的根节点
    //     label: 'name'
    //   }
    // };
  },
  // 生命周期函数初始化
  created(){
    // 在初始化时调用方法接口
this.getDepartments()
  },
  methods:{
  async getDepartments(){
    // 加载图标
    this.loading = true  //获取前，改为true
    // 拿到接口数据
const res = await getDepartments()
this.company ={name:res.companyName,manager:"负责人",id:""} 
console.log(res);
// 节点树状图第一个参数是遍历的list第二个参数是遍历的数据对象
this.departs= tranListToTreeData(res.depts,'')
 this.loading = false //获取后，改为false
    },
    // 点击添加部门的弹窗
    addDepts(node){
this.showDialog=true
this.node = node
    },
    /* 
    添加编辑部门的弹窗接收的同样是节点的数据
    */
   editDepts(node){
// 点击之后调用弹出层
this.showDialog=true
this.node = node
// 去封装获取部门信息的api
// 获取文件的实例对象
this.$refs.addDept.getDepartDetail(node.id)
   }
  }
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>